<script lang="ts">
  import Title from "../../../components/Title/Title.svelte";
  import Cylinder3d from "../../../components/Cylinder3d/Cylinder3d.svelte";
  import { onMount } from "svelte";
  import { catalog } from "../stores";

  onMount(async () => {
    const urlParams = new URLSearchParams(window.location.search);
    const type = urlParams.get("type") || 1;
    catalog.get(type);
  });
</script>

<div class="h-full flex flex-col">
  <Title title="设备种类分布" />
  <div class="h-full p-2">
    <div
      id="left-bottom"
      class="flex gap-3 flex-1 w-full h-full pb-7 2xl:pb-[2rem] 3xl:pb-[3rem] 4xl:pb-[4rem]"
    >
      {#each $catalog as cata}
        <Cylinder3d value={cata.value} label={cata.name} />
      {/each}
    </div>
  </div>
</div>
